<!--
 * @description: 
 * @Date: 2022-10-16 19:01:08
 * @LastEditTime: 2022-11-23 13:32:38
-->
<template>
  <div class="user-control space-y-2">
    <div v-if="store.state.isLogin" class="space-y-2">
      <div userBox>
        <el-avatar :size="30" :src="boy" />
        <span class="ml-2">{{ info?.mail }}</span>
      </div>
      <div userBox @click.stop="setpass(3)" class="hover">
        <span class="ml-2 text-black">修改密码</span>
      </div>
      <div userBox @click.stop="renderDef" class="hover">
        <span class="ml-2 text-yellow-500">重置图标</span>
      </div>
      <div userBox @click.stop="exportLink" class="hover">
        <span class="ml-2 text-blue-500">导出图标</span>
      </div>
      <div userBox @click.stop="store.commit('loginOut')" class="hover">
        <span class="ml-2 text-red-500">退出登录</span>
      </div>
    </div>

    <div v-else class="space-y-2">
      <div userBox>
        <span class="text-blue-400"
          >登录即可享更多功能和数据同步<br />传输双重数据加密更加安全</span
        >
      </div>
      <div userBox @click.stop="renderDef" class="hover">
        <span class="ml-2 text-blue-500">重置程序</span>
      </div>
      <div userBox @click.stop="setpass(1)" class="hover">
        <span class="ml-2 text-red-500">立即登录</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, watch } from "vue";
import { UserFilled } from "@element-plus/icons-vue";
import ajax from "../../util/ajax";
import emitter from "../../util/emitter";
import boy from "@/assets/svg/boy.svg";
import { downloadFile } from "@/util/plugins.js";
import { decode } from "../../util/rsa";
import cache from "../../util/cache";
import { ElMessageBox } from "element-plus";
import sm from "../../util/sm2";

const info = ref({});
const store = useStore();
const renderDef = async () => {
  try {
    await ElMessageBox.confirm("重置将会恢复到初始状态，是否重置图标？", "温馨提示");
  } catch (error) {
    return;
  }
  cache.del("link").del("config").del("tabbar");
  ajax({
    url: "/link/reset",
  }).then((el) => {
    if (el.code == 1) {
      emitter.emit("reload");
    }
  });
};
const getInfo = () => {
  ajax({
    url: "/user/get",
  }).then((el) => {
    info.value = JSON.parse(sm.decode(el.data));
  });
};
const setpass = (e) => {
  emitter.emit("openController", false);
  emitter.emit("openLogin", e);
};
const exportLink = () => {
  downloadFile("link", JSON.stringify(store.state.link));
};
watch(
  () => store.state.isLogin,
  (status) => {
    if (status) {
      getInfo();
    }
  }
);
getInfo();
</script>
<style lang="less">
.user-control {
  [userBox] {
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    display: flex;
    align-items: center;

    > span {
      font-size: 13px;
    }
  }
}
</style>
